<template>
    <div class="group-pic">
        <el-upload
  :action="uploadFileUrl"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :before-upload="beforeUpload"
  :headers="Token"
  name="image"
  ref="upload"
   :fileList="fileList"
  :on-change="handleChange"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import Sortable from 'sortablejs';
  export default {
    props: {
    file:{}
  },
    data() {
        return{
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[],
            baseUrl: process.env.VUE_APP_BASE_API,
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/conf_page/uploadPic", // 上传文件服务器地址
              Token: {
               Token:getToken(),
            },
            imgUrlList:[]
        }
    },
    watch: {
      file:{
        handler(newV){
          this.fileList=[]
        if(newV.length>0){
          let files = newV.slice(2) 
          files.forEach(ele => {
             this.fileList.push({
              url:ele
             })
          });
        }
        },
        immediate:true
    },
    fileList:{
      handler(newV){
      let imgArr=[]
      newV.forEach(ele=>{
          if(ele.response){
            imgArr.push(ele.response.data)
          }
          else{
            imgArr.push(ele.url)
          }
        }) 
        this.$emit('groupPic', imgArr);
    },
    immediate:true
  }
    },
    methods: {
      beforeUpload(file) {
        if(this.fileList.length>15){
          this.$message.error('详情图最多上传15张,请删除某些图片重新上传!');
          return false
        }
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG JPEG PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M ;
      },
        handleChange(file, fileList){
            this.fileList=fileList
        },
        handleRemove(file, fileList) {
        this.fileList=fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      initDragSort() {
       const el = this.$refs.upload.$el.querySelectorAll('.el-upload-list')[0];
       Sortable.create(el, {
         onEnd: ({ oldIndex, newIndex }) => {
            const arr = this.fileList;
		    const newPos = arr[oldIndex];
		    arr.splice(oldIndex, 1);
		    arr.splice(newIndex, 0, newPos);
            this.fileList=arr
         }
       });
     }
    },
    mounted() {
        this.initDragSort();
    },
  }
</script>
<style lang="scss" scoped>
    .group-pic{
        margin: 15px auto 25px;
        display: flex;
        justify-content: space-around;
        width: 90%;
    }
    ::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
  opacity: 0;
  transform: translateY(0);
}
</style>